<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="70px">
      <el-form-item label="部门" prop="departmentId">
        <el-select v-model="ruleForm.departmentId" @change="getKoukuan">
          <el-option
            v-for="item in deptsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column>
        <template slot-scope="{ row }">
          {{ row.dedTypeCode | formatDedType }}
          <el-switch
            v-model="row.isEnable"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <div v-if="row.dedTypeCode === '51000'" class="attentInfo">
            <div>
              迟到≤
              <el-input v-model="row.periodUpperLimit" @input.native="handelInt($event)" />分钟
            </div>
            <div class="attentInfo">
              <div style="margin-bottom: 15px">
                迟到≤<el-input
                  v-model="row.timesUpperLimit"
                  @input.native="handelInt($event)"
                />次，每次扣款<el-input v-model="row.dedAmonutUpperLimit" @input.native="handelInt($event)" />元
              </div>
              <div>
                迟到><el-input
                  v-model="row.timesLowerLimit"
                  disabled
                  @input.native="handelInt($event)"
                />次，每次扣款<el-input v-model="row.dedAmonutLowerLimit" @input.native="handelInt($event)" />元
              </div>
            </div>

            <div>
              迟到>
              <el-input v-model="row.periodLowerLimit" disabled @input.native="handelInt($event)" />分钟
            </div>
            <div class="attentInfo">
              <div>
                迟到><el-input
                  v-model="row.absenceTimesUpperLimt"
                  disabled
                  @input.native="handelInt($event)"
                />次，每次矿工<el-input v-model="row.absenceDays" @input.native="handelInt($event)" />元
              </div>
            </div>
          </div>

          <div v-if="row.dedTypeCode === '52000'" class="attentInfo">
            <div>
              早退≤
              <el-input v-model="row.periodUpperLimit" @input.native="handelInt($event)" />分钟
            </div>
            <div class="attentInfo">
              <div style="margin-bottom: 15px">
                早退≤<el-input
                  v-model="row.timesUpperLimit"
                  @input.native="handelInt($event)"
                />次，每次扣款<el-input v-model="row.dedAmonutUpperLimit" @input.native="handelInt($event)" />元
              </div>
              <div>
                早退><el-input
                  v-model="row.timesLowerLimit"
                  disabled
                  @input.native="handelInt($event)"
                />次，每次扣款<el-input v-model="row.dedAmonutLowerLimit" @input.native="handelInt($event)" />元
              </div>
            </div>

            <div>
              早退>
              <el-input v-model="row.periodLowerLimit" disabled @input.native="handelInt($event)" />分钟
            </div>
            <div class="attentInfo">
              <div>
                早退><el-input
                  v-model="row.absenceTimesUpperLimt"
                  disabled
                  @input.native="handelInt($event)"
                />次，每次矿工<el-input v-model="row.absenceDays" @input.native="handelInt($event)" />元
              </div>
            </div>
          </div>
          <div v-if="row.dedTypeCode === '53000'" class="attentInfo">
            <div>
              矿工按<el-input v-model="row.fineSalaryMultiples" @input.native="handelInt($event)" />倍工资处罚
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-row type="flex" justify="center" style="margin: 15px 0">
      <el-button type="primary" @click="btnOk">保存更新</el-button>
      <el-button @click="btnCancel">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { getKoukuan, settingKoukuan } from '@/api/attendance'
import attendanceEnum from '@/api/constant/attendance'
export default {
  filters: {
    formatDedType(val) {
      const obj = attendanceEnum.departmentType.find(
        (item) => item.dedTypeCode === val
      )
      console.log(obj.name)
      return obj.name
    }
  },
  data() {
    return {
      ruleForm: {
        departmentId: '1175310929766055936'
      },
      deptsList: [],
      tableData: [],
      rules: {
        departmentId: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getDepartments()
    this.getKoukuan('1175310929766055936')
  },
  methods: {
    btnCancel() {
      this.ruleForm.departmentId = '1175310929766055936'
      this.getKoukuan('1175310929766055936')
      this.$emit('updateShowDialog')
    },
    async btnOk() {
      this.tableData.forEach((item) => {
        if (item.isEnable) {
          item.isEnable = 0
        } else {
          item.isEnable = 1
        }
      })
      await settingKoukuan(this.tableData)
      this.$message.success('操作成功')
      this.btnCancel()
    },
    //   验证正整数
    handelInt(e, index, prop) {
      // list[index][prop] = ''
      console.log(e.data, e)
      if (Number(e.data) !== parseInt(e.data)) {
        console.log('报错')
        this.$message.error('只能输入正整数')
        e.data = ''
      }
      console.log(e.data)
    },
    async getDepartments() {
      const { depts } = await getDepartments()
      console.log(depts)
      this.deptsList = depts
    },
    async getKoukuan(val) {
      console.log(val)
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await getKoukuan(fd)
      if (res.length === 0) {
        this.tableData = attendanceEnum.departmentType
        this.tableData.map(item => {
          console.log(item)
          item.departmentId = val
        })
      } else {
        this.tableData = res
      }
      console.log(this.tableData)

      this.tableData.forEach((item) => {
        if (item.isEnable === 0) {
          item.isEnable = true
        } else {
          item.isEnable = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.attentInfo {
  padding: 15px 15px 15px 80px;
  .el-input {
    width: 50px;
  }
}
::v-deep .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>
